<template>  
    <el-form :model="formData" ref="formRef" label-width="120px" @submit.prevent="onFinished"  :rules="rules">  
      <el-form-item label="角色名称" prop="name">  
        <el-input v-model="formData.name" placeholder="请输入角色名称"></el-input>  
      </el-form-item>  
      <el-form-item label="启用">  
        <el-switch v-model="formData.state" active-value="1" inactive-value="0"></el-switch>  
      </el-form-item>  
      <el-form-item label="角色描述" prop="description">  
        <el-input type="textarea" v-model="formData.description" placeholder="请输入角色描述"></el-input>  
      </el-form-item>  
      <el-form-item>  
        <el-button type="primary" @click="onFinished">确定</el-button>  
        <el-button @click="close">取消</el-button>  
      </el-form-item>  
    </el-form>  
  </template>  
  
  <script setup>  
  import { ref, watchEffect, reactive,getCurrentInstance } from 'vue';  
  import { addRole, updateRole } from '@/api';  
  import { ElMessage } from 'element-plus';  
  // 这里是挂载到proxy实例的上边，可以实现全局调用
const { proxy } =  getCurrentInstance()
  const props = defineProps({  
    dialogVisible: {  
      type: Boolean,  
      default: false  
    },  
    roleData: {  
      type: Object,  
      default: () => null  
    },  
  });  
  
  const emit = defineEmits(['update:dialogVisible', 'addSuccess']);  
  const formData = reactive({  
    name: '',  
    state: 0,  
    description: ''  
  });  
  const rules = {  
    name: [  
        { required: true, message: '角色名称不能为空', trigger: 'blur' }  
    ],  
    description: [  
        { required: true, message: '角色描述不能为空', trigger: 'blur' }  
    ]  
};
  watchEffect(() => {  
    if (props.roleData) {  
      Object.assign(formData, props.roleData);  
    } else {  
      formData.name = '';  
      formData.state = 0;  
      formData.description = '';  
    }  
  });  
  
  const close = () => {  
    // proxy.$refs["formRef"].resetFields()
    console.log(' proxy.$refs["formRef"].', proxy.$refs["formRef"].resetFields());
    proxy.$refs["formRef"].resetFields()
    emit('update:dialogVisible', false); 

  };  
  const leclose = () => {
    //获取到表单dom，执行resetFields重置表单
    proxy.$refs["formRef"].resetFields()
  }
  const onFinished = async () => {  
    try {  
        await proxy.$refs["formRef"].validate(async (valid) => {  
            if (valid) {  
                if (props.roleData) {  
                    await updateRole({ ...formData, id: props.roleData.id });  
                    ElMessage.success('编辑成功');  
                } else {  
                    await addRole(formData);  
                    ElMessage.success('新增成功');  
                    proxy.$refs["formRef"].resetFields()
                }  
                close();  
                emit('addSuccess');  
            } else {  
                ElMessage.error('请填写表单中的必填项');  
            }  
        });  
    } catch (error) {  
        ElMessage.error('操作失败');  
    } 
  };  
  // 重点！！这里需要使用defineExpose暴露出去
defineExpose({
	leclose
})
  </script>  
  
  <style scoped>  
  /* 这里可以添加样式 */  
  </style>